<template>
  <div>
    <el-card>
      <div slot="header">
        <span>时间范围:</span>
        <el-date-picker
          v-model="date"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          size="mini"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <el-button type="primary" size="mini" @click="serachOrderData"
          >查询</el-button
        >
      </div>
      <div ref="main" style="width: 100%; height: 500px"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { orderTotal } from "@/api/order";
import dayjs from "dayjs";
export default {
  data() {
    return {
        myChart:"",
      date: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  //挂载后
  async mounted() {
    this.loadData();

//添加一个窗口改变事件
    window.addEventListener("resize", this.resizeListener);
  },
  methods: {
    //获取数据 动态化数据
    async loadData() {
      let res = await orderTotal({ date: this.date });
      // console.log(res.data);

      //x轴//提取时间
      let xData = res.data.map((item) =>dayjs(item.orderTime).format("YY/MM/DD")//处理时间
      );

      //y轴
      let yData = res.data.map((item) => item.orderAmount);//提取金额

      // console.log(yData);
      this.drawLineCharts(xData, yData);
    },
    //查询功能
    serachOrderData() {
      // console.log(this.date);
      this.loadData();
    },

    drawLineCharts(xData, yData) {
      //初始化
      this.myChart = echarts.init(this.$refs.main);
      //配置项
      let option = {
        //标题
        title: {
          text: "订单统计",
        },
        //提示
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#F20",
            },
          },
        },
        //图例
        legend: {
          data: ["订单"],
        },
        //工具盒子
        toolbox: {
          feature: {
            saveAsImage: {},
            dataView: {},
            magicType: {
              type: ["line", "bar", "stack"],
            },
          },
        },
        //网格
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        //x轴
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: xData,
          },
        ],
        //y轴
        yAxis: [
          {
            type: "value",
          },
        ],
        //核心数据
        series: [
          {
            name: "订单",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: yData,
            color: "#f60",
          },
        ],
      };
      //画图
      this.myChart.setOption(option);
 

    },

    // 适配echarts
    resizeListener(){
        this.myChart.resize()
    }

    
  },
};
</script>

<style lang="less" scoped>
.el-date-editor {
  margin: 0 20px;
}
</style>